<template>
  <div class="ask-manage">
    <div class="top-table-tool">
      <span class="left-tool">
        <el-input v-model="searchParams.name" placeholder="请输入问题主题" clearable />
        <el-select v-model="searchParams.type" placeholder="请选择帖子分类">
          <el-option
            v-for="item in typeData"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
        <button class="add-btn" @click="initWindow">查询</button>
        <button class="add-btn reset" @click="resetWindow">重置</button>
      </span>
      <el-button type="primary" size="mini" style="display: none">添加课程</el-button>
    </div>
    <compTable
      ref="table"
      :is-refresh-table="true"
      style="margin-top: 15px"
      size="mini"
      :stripe="false"
      :table-height="500"
      :show-checkbox="false"
      :table-header="tableHeader"
      :table-data="tableData"
      :show-menu="false"
      :show-search="false"
      :page-data="pageData"
    />
  </div>
</template>

<script>
import { getCommunityList, delCommunityList, getCommunityType } from '@/api/blog'
let that
export default {
  name: 'AskManage',
  data() {
    return {
      searchParams: {
        name: '',
        type: ''
      },
      pageData: {
        pageNum: 1,
        pageSize: 10
      },
      tableHeader: [
        { prop: 'userName', label: '用户名', width: 200 },
        { prop: 'title', label: '问题主题', width: 'auto' },
        { prop: 'typeName', label: '分类', width: 150 },
        { prop: 'hot', label: '浏览数', width: 80 },
        { prop: 'replyNum', label: '评论数', width: 80 },
        { prop: 'createTime', label: '创建时间', width: 150 },
        { prop: 'title', label: '操作', width: 150, align: 'center', render(h, { row }) {
          return (
            <span>
              <el-button plain size='mini' nativeOnClick={() => that.tableOperate('edit', row)}>编辑</el-button>
              <el-button plain size='mini' nativeOnClick={() => that.tableOperate('del', row)}>删除</el-button>
            </span>
          )
        } }
      ],
      tableData: [],
      typeData: []
    }
  },
  created() {
    that = this
    this.initWindow()
    this.getTypeList()
  },
  methods: {
    initWindow() {
      this.pageData.pageNum = 1
      const vPar = new this.ParamArr()
      vPar.setInt('iStartRow', 0)
      vPar.setInt('iCountRow', 1000)
      getCommunityList(vPar).then(vPar => {
        let nodes = []
        const table = new this.SQLTable(vPar.getTable('k_shop_forumlist'))
        table.first()
        while (!table.eof()) {
          const node = {}
          node['id'] = table.getValueByName('ID')
          node['type'] = table.getValueByName('Type')
          node['typeName'] = table.getValueByName('TypeName')
          node['createTime'] = table.getValueByName('CreateTime')
          node['lastTime'] = table.getValueByName('LastTime')
          node['createUser'] = table.getValueByName('CreateUser')
          node['userName'] = table.getValueByName('UserName')
          node['title'] = table.getValueByName('Title')
          node['content'] = table.getValueByName('Content')
          node['hot'] = table.getValueByName('Hot')
          node['replyNum'] = table.getValueByName('ReplyNum')
          node['collectNum'] = table.getValueByName('CollectNum')
          nodes.push(node)
          table.next()
        }
        if (this.searchParams.name) {
          nodes = nodes.filter(item => item.title.includes(this.searchParams.name))
        }
        if (this.searchParams.type) {
          nodes = nodes.filter(item => item.type.includes(this.searchParams.type))
        }

        this.tableData = nodes
      })
    },
    resetWindow() {
      this.searchParams = {
        name: '',
        type: ''
      }
      this.initWindow()
    },
    // 获取类型列表
    getTypeList() {
      this.$showLoading()
      const vPar = new this.ParamArr()
      getCommunityType(vPar).then(vPar => {
        const nodes = []
        const table = new this.SQLTable(vPar.getTable('k_shop_forumtype'))
        table.first()
        while (!table.eof()) {
          const node = {}
          node['id'] = table.getValueByName('ID')
          node['name'] = table.getValueByName('Name')
          node['desc'] = table.getValueByName('Desc')
          nodes.push(node)
          table.next()
        }
        this.typeData = nodes
      })
    },
    tableOperate(type, row) {
      switch (type) {
        case 'edit':
          this.$router.push({ name: 'AskQuestions', params: { id: row.id }})
          break
        case 'del':
          this.$comfirmDialog({
            message: `是否删除"${row.title}"?`,
            confirm: () => {
              const vPar = new this.ParamArr()
              vPar.setStr('ID', row.id)
              delCommunityList(vPar).then(vPar => {
                this.tableData = this.tableData.filter(item => item.id !== row.id)
              }).catch(err => {
                console.log(err)
              })
            }
          })
      }
    }
  }
}
</script>

<style scoped lang="scss">
.ask-manage {
  width: 100%;
  padding: 10px;
}
.top-table-tool {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .left-tool {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
.add-btn {
  width: 96px;
	height: 30px;
	background-color: $primaryColor;
	font-size: 14px;
	color: #ffffff;
  outline: none;
  border: none;
  cursor: pointer;
  margin-left: 10px;
  &.reset {
    background-color: transparent;
    border: 1px solid #888;
    color: #333;
  }
}
</style>
